<template>
    <div id="parts">
        <el-table :data="listdata.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe border :height="tableHeight" :header-cell-style="getRowClass">
            <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
            <el-table-column prop="orderNum" label="订单号" sortable min-width="130"></el-table-column>
            <el-table-column prop="productName" label="产品名称" sortable min-width="210"></el-table-column>
            <el-table-column prop="num" label="订单数量" sortable min-width="110"></el-table-column>
            <el-table-column prop="createTime" label="下单时间" sortable min-width="170"></el-table-column>
            <el-table-column prop="predictTime" label="期望到货时间" sortable min-width="170"></el-table-column>
            <el-table-column prop="orderStateName" label="订单状态" sortable min-width="110"></el-table-column>
            <el-table-column prop="surePredictTime" label="确定到货时间" sortable min-width="170"></el-table-column>
            <el-table-column prop="outStorageTime" label="起运时间" sortable min-width="170"></el-table-column>
            <el-table-column prop="lastSignTime" label="最后签收时间" sortable min-width="170"></el-table-column>
            <el-table-column prop="signTime" label="签收时间" sortable min-width="170"></el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="center" min-width="80">
                <template slot-scope="scope">
                    <el-button @click="updateList(scope.row)" type="text" size="small">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="listdata.length"></el-pagination>
        <!-- 编辑窗口 -->
        <el-dialog :title="updateTitle" width="80%" top="50px" :visible.sync="isUpdate" :close-on-click-modal="false">
            <div :style="dialogHeight">
                <h3 class="dialog-plate-title" style="margin-bottom: 20px"><span>基本信息</span></h3>
                <el-form :inline="true" class="demo-form-inline" v-model="tableData" label-position="right" label-width="150px">
                    <el-form-item label="订单号"><el-input v-model="tableData.orderNum" disabled></el-input></el-form-item>
                    <el-form-item label="商品名称"><el-input v-model="tableData.productName" disabled></el-input></el-form-item>
                    <el-form-item label="订单数量"><el-input v-model="tableData.num" disabled></el-input></el-form-item>
                    <el-form-item label="单位"><el-input v-model="tableData.unitName" disabled></el-input></el-form-item>
                    <el-form-item label="经销商"><el-input v-model="tableData.dealerName" disabled></el-input></el-form-item>
                    <el-form-item label="下单人"><el-input v-model="tableData.creatorName" disabled></el-input></el-form-item>
                    <el-form-item label="下单时间"><el-input v-model="tableData.createTime" disabled></el-input></el-form-item>
                    <el-form-item label="期望到货时间"><el-date-picker v-model="tableData.predictTime" disabled format="yyyy-MM-dd" type="date" placeholder="选择日期时间" style="width: 200px;"></el-date-picker></el-form-item>
                </el-form>

                <h3 class="dialog-plate-title" style="margin-bottom: 20px" disabled><span>审核信息</span></h3>
                <el-form :inline="true" class="demo-form-inline" v-model="tableData" label-position="right" label-width="150px">
                    <el-form-item label="确定到货时间"><el-date-picker v-model="tableData.surePredictTime" disabled format="yyyy-MM-dd" type="date" placeholder="选择日期时间" style="width: 200px;"></el-date-picker></el-form-item>
                    <el-form-item label="审核人"><el-input v-model="tableData.approverName" disabled></el-input></el-form-item>
                    <el-form-item label="审核时间"><el-input v-model="tableData.approveTime" disabled></el-input></el-form-item>
                    <el-form-item label="审核结果"><el-select v-model="tableData.approveResult" disabled><el-option value="1" label="审核通过"></el-option><el-option value="0" label="审核驳回"></el-option></el-select></el-form-item>
                    <el-form-item label="是否库存占用"><el-select v-model="tableData.isOccupiedStorage" disabled><el-option value="0" label="否"></el-option><el-option value="1" label="是"></el-option></el-select></el-form-item>
                </el-form>
                <el-form v-model="tableData" label-position="right" label-width="150px">
                    <el-form-item label="审核备注"><el-input type="textarea" v-model="tableData.approveRemark" style="width:97%" disabled></el-input></el-form-item>
                </el-form>
                <h3 class="dialog-plate-title" style="margin-bottom: 20px" disabled><span>物流信息</span></h3>
                <el-form :inline="true" class="demo-form-inline" v-model="tableData" label-position="right" label-width="150px">
                    <el-form-item label="物流公司"><el-input v-model="tableData.logisticsCompany" disabled></el-input></el-form-item>
                    <el-form-item label="运单号"><el-input v-model="tableData.logisticsNum" disabled></el-input></el-form-item>
                    <el-form-item label="起运人"><el-input v-model="tableData.logisticsPerson" disabled></el-input></el-form-item>
                    <el-form-item label="起运时间"><el-date-picker v-model="tableData.outStorageTime" disabled format="yyyy-MM-dd HH:ss:mm" type="datetime" placeholder="选择日期时间" style="width: 200px;"></el-date-picker></el-form-item>
                    <el-form-item label="最后签收时间"><el-date-picker v-model="tableData.lastSignTime" disabled format="yyyy-MM-dd HH:ss:mm" type="datetime" placeholder="选择日期时间" style="width: 200px;"></el-date-picker></el-form-item>
                    <el-form-item label="签收时间"><el-date-picker v-model="tableData.signTime" disabled format="yyyy-MM-dd HH:ss:mm" type="datetime" placeholder="选择日期时间" style="width: 200px;"></el-date-picker></el-form-item>
                    <el-form-item label="签收人"><el-input v-model="tableData.signPersonName" disabled></el-input></el-form-item>
                </el-form>
            </div>

        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tokenId: sessionStorage.getItem("tokenId"),
                currentPage: 1,
                pagesize: 10,
                tableHeight: document.documentElement.clientHeight - 130,
                dialogHeight: {
                    height: document.documentElement.clientHeight - 230 + 'px',
                    minHeight: document.documentElement.clientHeight - 230 + 'px',
                    overflowY: 'auto',
                },

                listdata: [],
                updateTitle: "",
                isUpdate: false,
                tableData: {
                    orderNum: "",
                    product: "",
                    productName: "",
                    unit: "",
                    dealer: "",
                    dealerName: "",
                    creator: "",
                    creatorName: "",
                    createTime: "",
                    predictTime: "",
                    approver: "",
                    approverName: "",
                    num: "",
                    approveTime: "",
                    isOccupiedStorage: "",
                    surePredictTime: "",
                    approveRemark: "",
                    logisticsCompany: "",
                    logisticsNum: "",
                    logisticsPerson: "",
                    outStorageTime: "",
                    unitName:'',
                    lastSignTime: "",
                    signTime: "",
                    orderState: "",
                    orderStateName: "",
                    approveResult: "",
                    signPerson: "",
                },
            };
        },
        created() {
            this.getOrderData();
        },
        methods: {
            getOrderData() {
                let _this = this;
                this.$http({
                    url: "/api/adscm/order/jyOrder/selectBystate/1?tokenId=" + _this.tokenId,
                    method: "post",
                    headers: {"X-Requested-With": "XMLHttpRequest"}
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        console.log(res.data.content);
                        _this.listdata = res.data.content;
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                });
            },
            updateList(row) {
                this.isUpdate = true;
                this.updateTitle = "详情";
                this.tableData = row;
            },

            handleSizeChange: function (size) {
                this.pagesize = size;
            },
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;
            },
            timestampToTime(timestamp) {
                if (timestamp) {
                    let date = new Date(timestamp);
                    let Y = date.getFullYear() + "-";
                    let M =
                        (date.getMonth() + 1 < 10
                            ? "0" + (date.getMonth() + 1)
                            : date.getMonth() + 1) + "-";
                    let D =
                        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
                    let h =
                        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
                        ":";
                    let m =
                        (date.getMinutes() < 10
                            ? "0" + date.getMinutes()
                            : date.getMinutes()) + ":";
                    return timestamp ? Y + M + D + h + m + "00" : "";
                } else {
                    return "";
                }
            }
        }
    };
</script>

<style scoped>

</style>
